Техническую документацию часто оформляют как отдельный репозиторий. Но сейчас удобней ее иметь в каждом проекте, чтобы генерить с помощью AI доку из контекста текущего репозитория.

Кроме монорепы, git submodules и других наворотов для решения этой задачи есть еще один - `ln -s`

Символьная ссылка на docs директорию в другие проекты не захламляет git, но тот же Cursor отлично видит её содержимое.

Параллельное составление актуальной документации полезно еще и тем, что IDE AI может использовать ее как часть контекста (не надо по 10 раз объяснять, как тут что работает)

Так же IDE AI можно научить при необходимости обновлять документацию после каждого рефакторинга

#ai #ide #documentation

Контейнерные запросы (Container Queries) — это инструмент в CSS, который позволяет стилизовать элементы на основе размеров их родительского контейнера, а не всего окна браузера. В Chrome 133 появилась новая фича — scroll states для контейнерных запросов, которая добавляет ещё больше контроля над поведением элементов.

Что такое Scroll States?

scrollable, stuck и snapped - это новые условия свойства scroll-state, которые можно использовать внутри @container, чтобы применять стили в зависимости от состояния прокрутки контейнера:


Пример:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: _Highlight;
      color: _HighlightText;
    }
  }
}

Где это можно использовать?

- Индикация прокрутки — визуально показывать, что есть ещё контент ниже
- "Липкие" заголовки — автоматически делать заголовки sticky при прокрутке
- Изменение навигации — например, показывать кнопку "Наверх" при прокрутке
- Оптимизация интерфейса — скрывать второстепенные элементы при прокрутке

Документация

#chrome #css

За долгие годы у меня было несколько миграций с браузера на браузер. Сейчас Chrome, перед ним были Vivaldi и Brave, и вот думаю об Edge, потому что Chrome ну что-то прям сильно часто стал не показывать то, что нормально показывает Edge.

Вообще переход на Chromium у MS был очень грамотный шаг

Embrace, extend, and extinguish

#chrome #ms

Продвинув Vite в экосистему React Эван выстрелил в свою Vue ногу - React попер как на дрожжах, согласно статистике w3tech.

#stats #react

Зелёной окисью окрасив интернет
Висит Vue лого мощная махина.
Окончен бой, соперников уж нет,
Сгорели под напалмом реактива.

Истерзанный фреймворками фронтенд
Склонил главу в заслуженном почтеньи.
Скупую похвалу дал Мурыч-дед,
И ви-три-си в слезах от умиленья.

Реакты что? Родятся и помрут.
Их жизнь есть тлен, и краток путь в забвенье.
Один лишь Vue теперь надолго тут,
Логичный, прогрессивный, офигенный.

#literature #creative

#audio #offtop

Тут знакомый попросил потестить его приложение на React Native на Андроиде

Столкнулся с непонятным поведением - курсор мигает в поле ввода, тыкаю на ссылку в другом месте - ноль реакции. С 10 раза как-то только получается

Зависания непонятные. Было пару раз что нижняя половина экрана становилась белой, пополам надпись прям какую-нибудь разделяя по горизонтали

То есть, артефакты, в обычной веб разработке вообще не встречающиеся.

Стало интересно - это он криво накодил/нагенерил, или это React Native сам по себе такой?

#react #mobile

Книга Chibi Vue от разработчика Yoichi Kikuchi - подробное руководство по внутреннему устройству Vue 3. Полезно для разработчиков, углублённо изучающих Vue.

В ней есть:

- Анализ ядра Vue: реактивность, компилятор шаблонов, система рендеринга.
- Практическая реализация упрощённой версии Vue с нуля.

Книга на английском языке.

#learning #chibivue #vuejs

Есть сайты, у которых нельзя открыть браузерные devtools

Делается это так:

Запрет на меню и хоткеи

document.addEventListener('contextmenu', event => event.preventDefault());

document.addEventListener('keydown', event => {
    if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
        event.preventDefault();
    }
});

Определять открытие девтулз и, например, перегружать страницу:

(function() {
    const element = new Image();
    Object.defineProperty(element, 'id', {
        get: function() {
            throw new Error('DevTools detected!');
        }
    });
    console.log(element);
})();

#badpractice #devtools

Идти по жизни надо так

А стремиться к цели - так

#offtop #video #motivation #animals

Очередной бессмысленный и беспощадный лонгрид: React vs Vue – подробное сравнение и перспективы

Комментировать не буду

#react #article

В последних версиях Vite активно доделывают поддержку lightningcss

Сейчас для процессинга CSS используется ESBuild, но с переходом на Rolldown нужно что-то другое.
Экспериментально lightningcss был в Vite с 4 версии.

#vite #css

Поздравляем Деми Мурыча с очередным взятым на выходных рубежом в форме Дня рождения и предлагаем широкой публике его мысли о TypeScript

#murych #audio #typescript

А что вы используете для составления презентаций?

После долгих поисков остановился на Marp
Содержание презентации находится в markdown, затем преобразуется в html, и потом в pdf

Из удобного:

1. Прост как валенок и проверен временем
2. Текст и оформление можно сгенерить AI и затем кастомизировать вручную
3. Каждый слайд держу отдельным файлом и собираю их скриптом - для разных презентаций свои слайды
4. Из-за перевода в html можно очень сильно кастомизировать любой слайд через CSS класс на этом слайде
5. Плагин для VS Code - сразу видно превью, и есть генерация по команде/кнопке

#presentation #markdown

:hover > :not(:hover)

hover обычно используется, чтобы выделить какой-то элемент. Но иногда красивей что-то сделать с остальными

ul {
  @media (hover) and (prefers-reduced-motion: no-preference) {
    & > li {
      transform-origin: left center;
      transition: transform 1s var(--ease-spring-3), opacity 0.3s var(--ease-3);
    }

    &:hover > li:not(:hover) {
      opacity: 0.25;
      transform: scale(0.8);
    }
  }
}

#css #tip